<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />
  <meta name="renderer" content="webkit" />
  <title>预约</title>

<style>
</style>
<link rel="stylesheet" href="/static/jquery-ui-1.12.0.custom/jquery-ui.min.css">

</head>
<body>

<p align="center">
  <br>
  {% if handler.tasks %}
  当前已经预约<br><br>
  {% for task in handler.tasks %}
  车牌 {{ task["content"]}}<br>
  下次用车时间 {{ task["datetime"] }}<br><br>
  {% end for %}
  {% end if %}

  <br>
  {% if handler.confirmed_tasks %}
  当前已经确认<br><br>
  {% for task in handler.confirmed_tasks %}
  车牌 {{ task["content"]}}<br>
  下次用车时间 {{ task["datetime"] }}<br><br>
  {% end for %}
  {% end if %}
  <br>
  <span style="font-size:30px;">下次用车日期</span><br><br>
  <input type="text" class="datepicker" style="color: white; width:280px; height:30px; font-size: 20px; background-color: gray; border:0; border-radius:5px;">
  <br><br>

  <span style="font-size:30px;">时间</span><br><br>
  <select name="time" class="time" style="color: white; width:280px; height:30px; font-size: 20px; background-color: gray;">
    <option value=" 07:00:00" selected="selected">早上</option>
    <option value=" 11:00:00">中午</option>
    <option value=" 16:00:00">傍晚</option>
  </select>
  <br><br>

  <span style="font-size:30px;">车辆</span><br><br>
  <select name="car" class="car" style="color: white; width:280px; height:30px; font-size: 20px; background-color: gray;">
    {% for car in handler.user.get("cars", [])%}
    {% if car["license"] not in [task["license"] for task in handler.confirmed_tasks] %}
    <option value="{{ car['license'] }}">{{ car['license'] }} {{ car['description'] }}</option>
    {% end if %}
    {% end for %}
  </select>
  <br><br><br>

  <button id="new_task" style="color: white; width:280px; height:30px; font-size: 20px; background-color: black; border:0; border-radius:5px;">预约</button>
</p>

</body>
<script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".datepicker").datepicker({minDate:0, maxDate:"+12M +10D", dateFormat:"yy-mm-dd"});
  $(".datepicker,#time").change(function(){
    $("#new_task").text("预约");
  });

  $("#new_task").click(function(){
    if(!$(".datepicker").val()){
      return;
    }
    license = $(".car").val();
    content = $(".car option").get($(".car")[0].selectedIndex).text;
    $.post("/api/new_task", {
      "community_id": "{{ handler.user.get('community_id', '0') }}",
      "license": license,
      "content": content,
      "datetime": $(".datepicker").val()+$(".time").val()
    }, function(){
      $("#new_task").text("预约成功");
    });
  });
});
</script>

</html>
